<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>

<body>
    <img src="./loading.gif" alt="" style="display: none;" id="loading" />
    <input type="file" id="file1" />
    <button id="btnUpload">上传文件</button>
    <script src="./lib/jquery.js"></script>
    <script>
        $('#btnUpload').click(function() {
            // 选中文件
            var file = $('#file1').get(0).files[0];
            if (!file) {
                alert('请选择文件');
                return;
            }
            // 基于jQuery进行文件上传
            var fd = new FormData();
            fd.append('avatar', file);
            // 发起 jQuery 的 Ajax 请求，上传文件
            $.ajax({
                type: 'POST',
                url: 'http://www.liulongbin.top:3006/api/upload/avatar',
                // data用于传递参数，默认会转换成字符串进行传递
                // 但是上传文件不需要转换为字符串
                data: fd,
                // 上传文件不需要吧data转换为字符串
                // 默认提交的数据是字符串形式的，文件上传需要传递二进制数据
                processData: false,
                // 修改默认的请求参数类型，保证可以上传文件
                contentType: false,
                success: function(res) {
                    console.log(res);
                },
            });
        });
    </script>
</body>

</html>